{% extends 'base.html' %}

{% block content %}
<div class="container mt-4">
    <h2>我的网盘</h2>
    
    <div class="card mt-4">
        <div class="card-body">
            <h5 class="card-title">客户端操作</h5>
            <p class="card-text">使用网盘客户端可以更方便地上传和管理文件</p>
            
            <div class="mt-3">
                <button id="openClientBtn" class="btn btn-primary me-2">打开客户端</button>
                <a href="{{ url_for('download_cloud_client') }}" class="btn btn-secondary">下载客户端</a>
            </div>
            
            <div id="clientStatus" class="mt-3 alert alert-info" style="display: none;"></div>
        </div>
    </div>
</div>

<script>
document.getElementById('openClientBtn').addEventListener('click', function() {
    fetch('/cloud/open')
        .then(response => response.json())
        .then(data => {
            const statusDiv = document.getElementById('clientStatus');
            statusDiv.style.display = 'block';
            
            if (data.success) {
                statusDiv.className = 'mt-3 alert alert-success';
                statusDiv.textContent = data.message;
            } else {
                statusDiv.className = 'mt-3 alert alert-danger';
                statusDiv.textContent = `${data.message}: ${data.error}`;
                
                // 如果打开失败，提示下载
                setTimeout(() => {
                    if (confirm('客户端未安装，是否立即下载？')) {
                        window.location.href = '/cloud/download';
                    }
                }, 1000);
            }
        })
        .catch(error => {
            console.error('Error:', error);
            const statusDiv = document.getElementById('clientStatus');
            statusDiv.style.display = 'block';
            statusDiv.className = 'mt-3 alert alert-danger';
            statusDiv.textContent = '无法连接到客户端，请确保已安装客户端';
            
            // 提示下载
            setTimeout(() => {
                if (confirm('客户端未安装，是否立即下载？')) {
                    window.location.href = '/cloud/download';
                }
            }, 1000);
        });
});
</script>
{% endblock %}
